<template>
    <div class = 'followEdit'>
        <tmpHeader :index='12'/>
        <div class="ibanner_header">
            <Button type="info" @click='addAnswer'>
                <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
            </Button>
            <div class="box">
                <Input
                    v-model.trim="val"
                    placeholder="请输入名称检索"
                    style="width: 200px;margin-right:10px;"
                    clearable
                />
                <Button type="primary" icon="ios-search"  @click="loadingFollow(1)"></Button>
            </div>
        </div>    
        <Table stripe :columns="columns1" :data="data1" style="margin:10px 0;"></Table>
        <div class="page">
            <Page :total="count" :current='pageNo' :page-size='pageSize' show-total show-elevator @on-change="pageChange"/>
        </div>
    </div>
</template>
<script>
import tmpHeader from "@/pages/organizat/contentmen/tmpHeader";
import api from "@/api/commonApi";
export default {
    components: {
        tmpHeader
    },
    data () {
        return {
            val: '',
            Status: false,
            modalTitle:"添加题目",
            pageNo: 1,
            pageSize: 10,
            count: 10,
            id: sessionStorage.getItem("hospitalId"),
            data1: [],
            columns1: [
                {
                    title:"排序",
                    key:'isum',
                    align:'center',
                    width: 80,
                    render: (h, params) => {
                        let isum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", isum);
                    }
                },
                {
                    title:"题目类型",
                    key:'questionType',
                    align:'center',
                    render:(h,params) => {
                        let row = params.row;
                        let type = this.followList[row.questionType - 1].name
                        return [
                            h('span', {
                            }, type)
                        ]
                    }
                },
                {
                    title:"题目名称",
                    key:'question',
                    align:'center'
                },
                {
                    title:"创建人",
                    key:'userName',
                    align:'center'
                },
                {
                    title:"创建时间",
                    key:'createTime',
                    align:'center'
                },  
                {
                    title:"是否启用",
                    key:'inused',
                    align:'center',
                    render:(h,params) => {
                        let row = params.row;
                        let type = row.inused == 0 ? '关闭' : '开启'
                        return [
                            h('span', {
                            }, type)
                        ]
                    }
                },          
                {
                    title:"设置",
                    align:"center",
                    width:180,
                    render: (h,params) => {
                        let row = params.row;
                        return [
                        h('a',{
                            on: {
                                click: () => {
                                    let id = row.id;
                                    this.functionJS.paramsNavgationTo(this, "questionEdit", {
                                        // 公用方法
                                        id
                                    }); 
                                }
                            }
                        },'编辑')
                        ]
                    }
                }
            ],
            formValidate: {
                questionNumber: "",
                question: "",
                sections:"",
                questionType:"",
                answerSelect:"",
                id : ""
            },
            ruleValidate: {
                questionNumber: [{ required: true, message: '请输入题号', trigger: 'blur', type:'number' }],
                question: [{ required: true, message: '请输入问题', trigger: 'blur' }],
                sections: [{ required: true, message: '请输入选择题答案', trigger: 'blur' }],
                questionType: [{ required: true, message: '请输入题目类型', trigger: 'change', type:'number'}],
                answerSelect: [
                        { required: true, message: '请输入填空题答案', trigger: 'blur' },
                        // { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
                    ]
            },
            followList: [
                { name:'单项选择题',id:1 },
                { name:'选择题加填空题',id:2 },
                { name:'问答题',id:3 },
                { name:'多项选择题',id:4 },
                { name:'宣教科普',id:5 },
            ],
            formId:"",
        }
    },
    created() {
        let breadList = [
        { path: "/index", title: "首页" },
        {
            path: "/index/operation/mechanism/index",
            title: "机构运营"
        },
        {
            path: "/index/operation/followForm/index",
            title: "随访表单"
        }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted () {
        this.formId = this.$route.query.id || null
        this.loadingFollow(1)
    },
    methods: {
        addAnswer () {
            this.functionJS.queryNavgationTo(
                this,
                "/index/organizat/contentmen/formLibrary/add",
            );
        },
        pageChange (index) {
            this.loadingFollow(index)
        },
        loadingFollow(pageNo) {
            this.pageNo = pageNo
            let url = api.questionBankPage
            let params = {
                pageNo,
                pageSize: this.pageSize,
                hospitalId: this.id,
                formId: this.formId,
                isUse: 0
            };
            if(this.val && this.val != '' ){
                params.searchKey = this.val
            }
            console.log(params)
            this.$axios.post(url,params).then(res => {
                if(res.data.success) {
                    let ret = res.data.object;
                    this.count = ret.total
                    if(ret.records){
                        ret.records.forEach((item,index) => {
                            item.isum = this.addZeros(index)
                        })
                        this.data1 = ret.records;
                    } else {
                        this.data1 = []
                    }
                } else {
                    this.data1 = []
                    this.$Message.error("加载随访表单列表失败!")
                }
            })
        },
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    let url = ''
                    let params = {}
                    params.questionNumber = this.formValidate.questionNumber
                    params.question = this.formValidate.question
                    params.sections = this.formValidate.sections
                    params.questionType = this.formValidate.questionType
                    params.answerSelect = this.formValidate.answerSelect
                    params.formId = this.formId;

                    if(!Boolean(this.formValidate.id)) {
                        url = api.formcontentinsertformcontent
                    } else {
                        url = api.formcontentupdateformcontent
                        params.id = this.formValidate.id
                    }
                    this.$axios.post(url, params).then(res => {
                        console.log(res);
                        if(res.data.success) {
                            let ret = res.data.object
                            this.Status = false;
                            this.loadingFollow(1)
                            let message = ret.success || "保存成功"
                            this.$Message.success(message)
                            this.handleReset('formValidate');
                        } else {
                            let message = res.data.object.same || res.data.object.file || '保存失败'
                            this.$Message.error(message)
                        }
                    })
                } else {
                    this.$Message.error('请完整填写必填项!');
                }
            })
        },
        handleReset (name) {
            this.Status = false
            this.$refs[name].resetFields();
            this.formValidate.questionNumber = ''
            this.formValidate.question = ''
            this.formValidate.sections = ''
            this.formValidate.questionType = ''
            this.formValidate.answerSelect = ''
            this.formValidate.id = ''
        }
    }
}
</script>
<style lang="less" scoped>
.followEdit{
    width: 100%;
    padding: 10px 30px;
    margin: 0 auto;
    background: #fff;
    .ibanner_header {
      width: 100%;
      margin: 20px auto;
      display: flex;
      .box {
        display: flex;
        flex-direction: row;
        margin-left: 10px;
      }
    }
    .page{
      text-align: center;
      margin: 20px 0;
    }
}
</style>
